<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        button{
            padding: 5px 15px;
            border: none;
            outline: none;
        }
        div{
            width: 200px;
            height: 200px;
            background: #ccc;
            display: none;
        }
        .active{
            background: red;
        }
    </style>
</head>
<body>
<button>A</button>
<button>B</button>
<button>C</button>

<div style="display: block;">A</div>
<div>B</div>
<div>C</div>
<script>
   /*var aBtn = document.getElementsByTagName('button');
     var aDiv = document.getElementsByTagName('div');

   for(var i=0;i<aBtn.length;i++){

       aBtn[i].index = i;
       aBtn[i].onclick = function () {

           for(var i=0;i<aBtn.length;i++){
               aBtn[i].className = '';
               aDiv[i].style.display = 'none';
           }
          aBtn[i].className = 'active';
          aDiv[this.index].style.display = 'block';

       }
   }*/

  /* window.onload = function () {
       new TabSwitch();
   };*/

   function TabSwitch() {


       this.aBtn = document.getElementsByTagName('button');
       this.aDiv = document.getElementsByTagName('div');

       for (var i = 0; i < this.aBtn.length; i++) {


           var _this = this;
           this.aBtn[i].index = i;
           this.aBtn[i].onclick = function () {
               _this.fnClick(this);//现在_this和this都指的是new出来的对象
           }

       }
   }
   TabSwitch.prototype.fnClick = function (oBtn) {

       console.log(this);
       for(var i=0;i<this.aBtn.length;i++){//this指的是aBtn,aBtn上没有aBtn的属性
           this.aBtn[i].className = '';
           this.aDiv[i].style.display = 'none';
       }
       oBtn.className = 'active';
       this.aDiv[oBtn.index].style.display = 'block';

   };

   var obj = new TabSwitch();
















</script>
</body>
</html>